<template>
    <div>
        <div class="poster-div">
            <el-card class="poster">
                <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
            </el-card>
        </div>
        <el-col :span="12">
            <div style="margin: 10px;">
                <h1>{{eventInfo.title}}</h1>
                <h3 class="event-status">{{status}}</h3>
                <h3>时间：{{eventInfo.start_time}} 至 {{eventInfo.end_time}}</h3>
                <h3>地点：{{eventInfo.location}}</h3>
                <el-divider></el-divider>
                <h1>详情：</h1>
                <h3>{{eventInfo.details}}</h3>                
                <div v-if="status == 'past'">
                    <el-divider></el-divider>
                    <h1>评价：</h1>
                    <h3>综合评分：</h3>
                    <h3>评论详情：</h3>
                    <el-row v-for="(r, rIndex) in reviews" :key="rIndex">
                        <el-row>
                            <el-col :span="4">{{r.reviewer_name}}</el-col>
                            <el-col :span="20">{{r.score}}</el-col>
                        </el-row>
                        <el-row>
                        <el-col :span="2"></el-col>
                        <el-col :span="22">{{r.comment}}</el-col>
                        </el-row>
                    </el-row>
                </div>
            </div>
        </el-col>
        <el-col :span="12">
            <div style="margin-top: 10px;">
                <h1>售票信息</h1>
                <el-card v-for="(t, tIndex) in tickets" :key="t.id" shadow="never" style="magin-top: 10px;">
                    <el-row style="height: 25px;">     
                        <el-col :span="8">
                            <h3>{{t.name}}</h3>
                        </el-col>
                        <el-col :span="8">
                            <h3>¥ {{t.price}}</h3>
                        </el-col>
                        <el-col :span="8">
                            <h3>已售：{{t.soldNum}}</h3>
                        </el-col>                        
                    </el-row>
                    <el-divider></el-divider>
                    <el-row>
                        <div>
                            售票截止时间：{{t.saleEndTime}}
                            <div v-if="t.returnable">
                                可退票，截止时间：{{t.returnEndTime}}
                            </div>
                            <div v-if="t.transferable">
                                可转售，截止时间：{{t.transferEndTime}}<br>
                                可赠予，截止时间：{{t.transferEndTime}}
                            </div>
                            有效期截止时间：{{t.validBefore}}<br>
                            单人最多购买{{t.maxNum}}张票<br>
                            说明：{{t.description}}<br>
                        </div>
                    </el-row>
                </el-card>
            </div>
            
        </el-col>
        
    </div>
</template>

<script>    
import {mapGetters} from 'vuex';

export default {
    data() {
        return {
            status: '',

            eventInfo: {
                id: '',
                title: '',
                location: '',
                start_time: '',
                end_time: '',
                details: '',
            },
            tickets: [],
            reviews: [],
        }
    },
    created() {
        this.eventInfo.id = this.$route.params.id;
        this.eventInfo.title = this.$route.params.title;
        this.eventInfo.location = this.$route.params.location;
        this.eventInfo.start_time = this.$route.params.start_time;
        this.eventInfo.end_time = this.$route.params.end_time;

        this.getEventDetails();
        this.getTickets();

        this.setStatus();
    },
    computed: {
        ...mapGetters([
            'userId',
            'username',
            'address',
        ]),
    },
    methods: {
        getEventDetails() {
            this.api({
                url: "/event/getEventDetails",
                method: "post",
                data: {event_id: this.eventInfo.id}
            }).then(data => {
                this.eventInfo.details = data.info;
            })
        },
        getTickets() {
            this.api({
                url: "/event/getTicketsByEventId",
                method: "post",
                data: {event_id: this.eventInfo.id}
            }).then(data => {
                this.tickets = data.info;
                this.getSoldNum();
            })
        },
        getSoldNum() {
            for (let i = 0; i < this.tickets.length; i++) {
                this.api({
                    url: "/ticketing/getSoldTicketsNum",
                    method: "post",
                    data: {userId: this.userId, ticketId: this.tickets[i].id}
                }).then(data => {
                    // this.soldNum[i] = data.info;
                    this.$set(this.tickets[i], "soldNum", data.info);
                })
            }
           
        },
        setStatus() {
            let now = Date.now();
            let endTime = new Date(this.eventInfo.end_time).getTime();
            let startTime = new Date(this.eventInfo.start_time).getTime();
            if (now < startTime) {
                this.status = '未开始';
            } else if (now < endTime) {
                this.status = '正在进行';
            } else {
                this.status = '已结束';
            }
        },
    },
}
</script>

<style scoped>
.poster-div {
    width: 1000px;
    height: 500px;
    margin-top: 20px;
}

.poster {
    width: 1000px;
    height: 500px;
}

/* .el-scrollbar__wrap {
    overflow-x: hidden;
} */

.ticket-card {
    width: 600px;
    margin: 20px;
}
    
.event-status {
    font-size: 18px;
    color: #E6A23C;
}
</style>